<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
          推荐食谱管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.selectedAge" placeholder="年龄" class="handle-select mr10">
          <el-option :key="i" :label="i + '岁'" :value="i" v-for="i in ages"></el-option>
        </el-select>
        <el-select v-model="query.category" placeholder="就餐类别" class="handle-select mr10">

          <el-option key="0" label="早餐" value="0"></el-option>
          <el-option key="1" label="午餐" value="1"></el-option>
          <el-option key="2" label="晚餐" value="2"></el-option>
        </el-select>
        <el-select v-model="query.selectedDay" placeholder="周天" class="handle-select mr10">
          <el-option key="" label="全部类型" value=""></el-option>
          <el-option :key="item.key" :label="item.value" :value="item.key" v-for="item in weeks"></el-option>
        </el-select>
        <el-button type="primary" @click="handleSearch"><el-icon style="margin-right: 5px">
            <Search />
          </el-icon>搜索</el-button>
        <el-button type="primary" @click="handleAdd('add')">添加推荐食谱</el-button>
      </div>
      <el-table :data="tableData" ref="mydietTable" class="table" header-cell-class-name="table-header"
        v-loading="loading">
        <el-table-column type="expand" width="1">
          <template #default>
            <el-table :data="childDetailData">
              <el-table-column label="序号" width="70" align="center">
                <template #default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="食谱信息" prop="info" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" min-width="20%" align="center"></el-table-column>
        <el-table-column prop="week" label="周天" min-width="20%" align="center">
          <template #default="scope">
            {{ computedWeek(scope.row.week) }}
          </template>
        </el-table-column>
        <el-table-column label="就餐类别" min-width="20%" align="center">
          <template #default="scope">
            <el-tag :type="'success'">
              {{
                scope.row.category == 0
                ? '早餐'
                : scope.row.category == 1
                  ? '午餐'
                  : scope.row.category == 2
                    ? '晚餐'
                    : scope.row.category == 3
                      ? '加餐'
                      : '其他'
              }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="recommendRecipeInfo" label="推荐食谱信息" min-width="30%" align="center"></el-table-column> -->
        <el-table-column label="操作" width="350" align="center">
          <template #default="scope">
            <el-button link type="primary" icon="el-icon-edit" @click="handleShowDetail(scope.row)"><el-icon
                style="margin-right: 5px">
                <Edit />
              </el-icon>详情</el-button>
            <el-button link type="primary" icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row, 'edit')"><el-icon style="margin-right: 5px">
                <Edit />
              </el-icon>编辑</el-button>
              <el-popconfirm title="确定要删除此信息？" confirm-button-text="确定" cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)">
              <template #reference>
                <el-button size="small" type="danger"><el-icon style="margin-right: 5px">
                    <Delete />
                  </el-icon>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 推荐食谱编辑 -->
    <el-dialog v-model="centerDialogVisible" title="推荐食谱编辑" width="40%">
      <div>
        <div>
          <el-form ref="ruleFormRef" :model="ruleForm" label-width="80px" class="ruleForm" label-position="left"
            status-icon>
            <el-form-item label="年龄" prop="selectedAge">
              <el-select v-model="ruleForm.selectedAge" placeholder="年龄" class="handle-select mr10">
                <el-option :key="i" :label="i + '岁'" :value="i" v-for="i in ages"></el-option>
              </el-select>
              <span style="padding-left: 10px;">每日热量总量:{{ computedTotalKcal(ruleForm.selectedAge) }}千卡</span>
            </el-form-item>
            <el-form-item label="周天" prop="selectedDay">
              <el-select v-model="ruleForm.selectedDay" placeholder="周天" class="handle-select mr10">
                <el-option :key="item.key" :label="item.value" :value="item.key" v-for="item in weeks"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="就餐类别" prop="category">
              <el-select v-model="ruleForm.category" placeholder="参数" class="handle-select mr10">
                <el-option key="0" label="早餐" :value="0"></el-option>
                <el-option key="1" label="中餐" :value="1"></el-option>
                <el-option key="2" label="晚餐" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <div class="addFrom">
              <el-button @click="addGoodsInfo"><el-icon>
                  <Plus />
                </el-icon>添加</el-button>
              <div class="addFrom_box" v-for="(item, index) in ruleForm.recommendRecipeInfos" :key="index">
                <el-form-item label="推荐食谱信息" label-width="auto" :prop="`recommendRecipeInfos.` + index + `.name`">
                  <el-input clearable v-model="item.info" placeholder="请输入推荐食谱信息" style="width: 400px" />
                </el-form-item>
                <el-button @click="deleteGoodsInfo(index)">
                  <el-icon>
                    <Delete />
                  </el-icon></el-button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, nextTick } from 'vue'
import request from '../../utils/request'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  setup() {
    const mydietTable = ref()
    let handleType = 'add'
    const centerDialogVisible = ref(false)
    const loading = ref(true)
    const childDetailData = ref([])
    const tableData = ref([])
    const ages = ref([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18])
    const weeks = ref([{ key: 0, value: '概要' }, { key: 1, value: '周一' },
    { key: 2, value: '周二' },
    { key: 3, value: '周三' },
    { key: 4, value: '周四' },
    { key: 5, value: '周五' },
    { key: 6, value: '周六' },
    { key: 7, value: '周日' }])
    const ruleForm = reactive({
      recommendRecipeId:'',
      selectedDay: 0,
      selectedAge: 2,
      category: 0,
      recommendRecipeInfos: [
        { info: null }
      ]
    })
    const query = reactive({
      category: '0',
      selectedDay: '',
      selectedAge: 2
    })
    const addGoodsInfo = () => {
      ruleForm.recommendRecipeInfos.push({ info: null })
    }
    // 删除按钮
    const deleteGoodsInfo = (index) => {
      // console.log(index);
      ruleForm.recommendRecipeInfos.splice(index, 1)
    }
    const computedWeek = (week) => {
      let weekText = ''
      if (week == 0) {
        weekText = '概要'
      } else if (week == 1) {
        weekText = '周一'
      } else if (week == 2) {
        weekText = '周二'
      } else if (week == 3) {
        weekText = '周三'
      } else if (week == 4) {
        weekText = '周四'
      } else if (week == 5) {
        weekText = '周五'
      } else if (week == 6) {
        weekText = '周六'
      } else if (week == 7) {
        weekText = '周日'
      }
      return weekText
    }
    const computedTotalKcal = (age) => {
      let param = 0
      if (age < 3) {
        param = 100
      } else {
        if (age >= 3 && age <= 6) {
          param = 90
        } else if (age >= 7 && age <= 10) {
          param = 80
        } else {
          param = 70
        }
      }
      return 1000 + (age * param)
    }
    // 获取表格数据
    const getData = () => {
      request
        .request({
          url: '/recipe/queryRecommend',
          params: {
            category: query.category,
            week: query.selectedDay,
            age: query.selectedAge,
          },
          method: 'get',
        })
        .then((res) => {
          //获取当前页的数据
          tableData.value = res.data.data
          loading.value = false
        })
        .catch((e) => {
          console.log(e)
        })
    }
    getData()
    // 查询操作
    const handleSearch = () => {
      getData()
    }

    //展开显示详情
    const handleShowDetail = async (row) => {
      childDetailData.value = row.recommendRecipeInfo.split('#').map((item) => {
        return { info: item }
      })
      mydietTable.value.toggleRowExpansion(row)

    }
    const handleEdit = (index, row, type) => {
      handleType = type
      ruleForm.recommendRecipeId = row.recommendRecipeId
      ruleForm.category = row.category
      ruleForm.selectedAge = row.age
      ruleForm.selectedDay = row.week
      ruleForm.recommendRecipeInfos = row.recommendRecipeInfo.split('#').map((item) => {
        return {
          info: item
        }
      })
      centerDialogVisible.value = true
    }

    const handleDelete = (index, row) => {
      loading.value = true
      request
        .request({
          url: '/recipe/removeRecommend?recommendRecipeId=' + row.recommendRecipeId,
          method: 'get',
        })
        .then((res) => {
          if (res.data.message == 'success') {
            getData()
            ElNotification({
              title: '删除成功',
              message: '成功删除推荐信息',
            })
            loading.value = false
          } else {
            ElNotification({
              title: '删除失败',
              message: '请联系管理员检查失败原因',
            })
          }
        })
        .catch((e) => {
          ElNotification({
            title: '删除失败',
            message: '请联系管理员检查失败原因',
          })
        })
    }

    const handleAdd = (type) => {
      handleType = type
      ruleForm.category = 0
      ruleForm.selectedAge = 2
      ruleForm.selectedDay = 0
      ruleForm.recommendRecipeInfos = [
        { info: null }
      ]
      centerDialogVisible.value = true
    }
    const submitForm = () => {
      let url = ''
      if (handleType == 'add') {
        url = '/recipe/addRecommend'
      } else if (handleType == 'edit') {
        url = '/recipe/updateRecommend'
      }
      request
        .request({
          url,
          data: {
            recommendRecipeId:ruleForm.recommendRecipeId,
            category: ruleForm.category,
            week: ruleForm.selectedDay,
            age: ruleForm.selectedAge,
            recommendRecipeInfo: ruleForm.recommendRecipeInfos.map((r) => {
              return r.info
            }).join('#')
          },
          method: 'post',
        })
        .then((res) => {
          if (res.data.code == '200') {
            if (handleType == 'add') {
              ElNotification({
                title: '新增成功',
                message: '成功新增推荐食谱信息',
              })
            } else if (handleType == 'edit') {
              ElNotification({
                title: '更新成功',
                message: '成功更新推荐食谱信息',
              })
            }
          }
        })
        .catch((e) => {
          ElNotification({
            title: '请求失败',
            message: '请联系管理员',
          })
        })

    }
    return {
      handleType,
      weeks,
      ages,
      addGoodsInfo,
      deleteGoodsInfo,
      ruleForm,
      computedTotalKcal,
      query,
      tableData,
      handleSearch,
      handleEdit,
      handleDelete,
      handleAdd,
      computedWeek,
      handleShowDetail,
      submitForm,
      mydietTable,
      centerDialogVisible,
      childDetailData,
      loading
    }
  },
}
</script>

<style lang="scss" scoped>
:deep(.el-table__expand-icon) {
  visibility: hidden !important;
}

.collapseContainer {
  padding: 15px;
  background-color: #fff;
}

.addFrom_box {
  display: flex;
}

// .el-collapse-item{
//   padding: 5px;
// }
</style>
